// 获取文章详情
async function getArticleDetailsRequest() {
    const articleId = new URL(location.href).searchParams.get('id')
    const res = await $.ajax({
        url: 'http://localhost:8081/api/getArticleDetails.php/' + articleId,
        type: 'get'
    })
    return res
}

// markdown 转 html
function markdownOutputHtml(markdown) {
    const converter = new showdown.Converter()
    const htmlOutput = converter.makeHtml(markdown)

    return htmlOutput
}

// 渲染文章详情
async function renderArticleDetails() {
    const articleData = await getArticleDetailsRequest()
    document.querySelector('.article-main .head .title').innerHTML = articleData.data.title
    document.querySelector('.article-main .head .time span').innerHTML = diffForHumans(articleData.data.update_at)
    document.querySelector('.article-main .head .view span').innerHTML = articleData.data.view
    document.querySelector('.markdown-body').innerHTML = markdownOutputHtml(articleData.data.content)
}
renderArticleDetails()

// 获取评论
async function getComment() {
    const articleId = new URL(location.href).searchParams.get('id')
    const res = await $.ajax({
        url: 'http://localhost:8081/api/getComment.php/' + articleId,
        type: 'get'
    })
    return res
}

// 渲染评论
async function renderComment() {
    const commentData = await getComment()
    const userList = document.querySelector('.article-comment .main .user-list')
    userList.innerHTML = ''
    const fragment = document.createDocumentFragment()
    document.querySelector('.article-comment .head i').innerHTML = commentData.data.length
    document.querySelector('.article-main .info .comment-num span').innerHTML = commentData.data.length
    if (commentData.code === 1) {
        commentData.data.forEach(item => {
            const div = document.createElement('div')
            div.className = 'user-item'
            div.innerHTML = `
                <div class="pic" style="background-image: url(${item.user.avatar ? item.user.avatar : '../../assets/defaultAvatar2.png'});"></div>
                <div class="comment">
                    <span class="name">${item.user.username}</span>
                    <p class="content">${item.content}</p>
                </div>  
            `
            fragment.appendChild(div)
        })
        userList.appendChild(fragment)
    }
}
renderComment()

// 添加评论
async function addComment(data) {
    console.log(data)
    const res = await $.ajax({
        url: 'http://localhost:8081/api/commentAdd.php',
        type: 'post',
        data: data
    })
    return res
}

// 评论按钮点击事件
$('.article-reply .btn').click(async function () {
    const user_id = JSON.parse(localStorage.getItem('userInfo')).id
    const article_id = new URL(location.href).searchParams.get('id')
    const content = document.querySelector('.article-reply textarea')
    const res = await addComment({
        user_id,
        article_id,
        content: content.value
    })

    if (res.code === 1) {
        myAlert(true, '评论成功')
        content.value = ''
        renderComment()
    } else {
        myAlert(false, res.msg)
    }
})